<template>
  <div id="app">
  <router-view/>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'App',
  setup() {
    const store = useStore()
    
    onMounted(() => {
      // 初始化应用状态
      store.dispatch('initializeApp')
    })
    
    return {}
  }
}
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

#app {
  min-height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Element Plus 组件样式覆盖 */
.el-button--primary {
  background: linear-gradient(45deg, #00D4FF, #4F46E5);
  border: none;
}

.el-button--primary:hover {
  background: linear-gradient(45deg, #00B8E6, #4338CA);
}

.el-button--info {
  background: linear-gradient(45deg, #00D4FF, #00B8E6);
  border: none;
  color: white;
}

.el-button--info:hover {
  background: linear-gradient(45deg, #00B8E6, #0099CC);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.6);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.8);
}

/* 链接样式 */
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: none;
}

/* 卡片悬停效果 */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

/* 渐变文字 */
.gradient-text {
  background: linear-gradient(45deg, #00D4FF, #4F46E5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 毛玻璃效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 响应式辅助类 */
.mobile-hidden {
  display: block;
}

@media (max-width: 768px) {
  .mobile-hidden {
    display: none !important;
  }
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
}

/* 布局辅助类 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-center {
  text-align: center;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from {
  transform: translateY(30px);
  opacity: 0;
}

.slide-up-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}

/* 全局Element Plus深色主题强制覆盖 */
.el-dropdown-menu {
  background: rgba(26, 26, 46, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.el-dropdown-menu .el-dropdown-menu__item {
  color: #ffffff !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.el-dropdown-menu .el-dropdown-menu__item:hover {
  background: rgba(100, 181, 246, 0.2) !important;
  color: #64b5f6 !important;
}

.el-dropdown-menu .el-dropdown-menu__item--divided {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.el-select-dropdown {
  background: rgba(26, 26, 46, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.el-select-dropdown .el-select-dropdown__item {
  color: #ffffff !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.el-select-dropdown .el-select-dropdown__item:hover {
  background: rgba(100, 181, 246, 0.2) !important;
  color: #64b5f6 !important;
}

.el-select-dropdown .el-select-dropdown__item.selected {
  background: rgba(100, 181, 246, 0.3) !important;
  color: #64b5f6 !important;
}

.el-select .el-input__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
}

.el-select .el-input__inner {
  color: #ffffff !important;
}

.el-select .el-select__caret {
  color: #ffffff !important;
}

.el-select .el-input__wrapper:hover {
  border-color: rgba(100, 181, 246, 0.5) !important;
}

.el-select .el-input__wrapper.is-focus {
  border-color: #64b5f6 !important;
  box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
}
</style>
